<template>
  <view>
    <!-- 签署流浪包 -->
    <uni-card :is-shadow="false" v-for="(item,index) in dataList" :key="index" class="card-list">
      <p><span class="grid-title">{{ item.name }}</span></p>
      <p style="margin:25rpx 0;">
        <span class="grid-nowPrice">¥{{ item.nowPrice }}</span>
        <span class="grid-integral" style="margin-left: 6rpx;">签署价：{{ item.unitPrice }}元/次</span>
      </p>
      <p style="margin-top:10rpx;">
		<span class="grid-oldPrice" style="color: #f56c6c;">
		  原价 ¥ {{ item.oldPrice }}（节省 ¥ {{ item.oldPrice - item.nowPrice }}元）
		</span>		  
      </p>
      <p style="margin-top:10rpx;">
        <span class="grid-integral">签署量：{{ item.signNum }} 次 + 赠送：{{ item.giveSignNum }}次</span>
      </p>
      <p style="margin-top:5rpx;">
        <span class="grid-integral">
         分享 {{ item.shareNum }} 个企业客户可兑换，签署套餐有效期：
           <template v-for="(dictItem, index) in dicts.ec_sign_flow_fee_valid_period">
            <template v-if="item.validPeriod == dictItem.value">
              <span>{{ dictItem.text }}</span>
            </template>
          </template>
        </span>    
      </p>
      <view slot="actions" class="card-actions" style="width:70%;margin:0 auto">
        <view class="card-actions-item" @click="toShowIntegralExchange(item)">
          <text class="card-actions-item-text themeColor">碳能量兑换</text>
        </view>
        <view class="card-actions-item" @click="toShowAccountBuy(item,index)">
          <text class="card-actions-item-text themeColor">余额购买</text>
        </view>
      </view>
    </uni-card>
    <!-- 个人签署套餐定制 -->
    <uni-card :is-shadow="false">
      <p><span class="grid-title">个人签署套餐定制</span></p>
      <p style="margin:25rpx;">若您签署量较大，请联系励氪签工作人员，为您定制专属合作方案。</p>
      <view class="gride-btn">
        <span>销售热线：400-891-3655</span>
        <button size="mini" class="solid_btn" @click="phone">立即联系</button>
      </view>
    </uni-card>

    <!-- 碳能量兑换 -->
    <uni-popup ref="integralPopup" type="dialog">
      <uni-popup-dialog
          :type="msgType"
          :before-close="true"
          cancelText="取消"
          confirmText="兑换"
          title="碳能量兑换"
          @confirm="toIntegralExchange"
          @close="dialogClose">
        <template v-slot="content">
          <view class="bg_title">
            购买账户【<span style="font-weight:600;">{{ userInfo.name }}</span>】，账户碳能量：
            <span style="font-weight:600;">{{ userInfo.integral }}</span>
            <span style="margin-left: 5rpx;"> g</span>
          </view>
          <uni-forms
              ref="integralForm"
              :modelValue="form"
              :rules="rules"
              label-width="170rpx"
              type="line">
            <uni-forms-item label="套餐名称" name="name" class="paddingAll">
              <uni-easyinput v-model="form.name" type="text" disabled/>
            </uni-forms-item>
            <uni-forms-item label="签署量" name="signNum" class="paddingAll">
              <uni-easyinput v-model="form.signNum+' 次'" type="text" disabled/>
            </uni-forms-item>
            <uni-forms-item label="赠送" name="giveSignNum" class="paddingAll">
              <uni-easyinput v-model="form.giveSignNum+' 次'" type="text" disabled/>
            </uni-forms-item>
            <uni-forms-item label="支付碳能量" name="integral" class="paddingAll">
              <uni-easyinput v-model="form.integral+'g'" type="text" disabled/>
            </uni-forms-item>
            <uni-forms-item label="支付密码" name="payPwd" :required="true">
              <uni-easyinput
                  v-model="form.payPwd"
                  type="password"
                  placeholder="请输入支付密码"
                  :clearable="false"
                  :maxlength="30"/>
            </uni-forms-item>
            <view>
              <checkbox-group
                  style="margin-top:20rpx;text-align: left;font-size: 24rpx;"
                  @change="selectEleBuyAgreement">
                <label>
                  <checkbox value="1" color="#00a660" style="transform:scale(0.6)"/>
                  我已阅读并同意
                  <a class="a-primary" @click.stop="toEleBuyAgreement">
                    <span>《电子签服务购买协议》</span>
                  </a>
                </label>
              </checkbox-group>
            </view>
          </uni-forms>
        </template>
      </uni-popup-dialog>
    </uni-popup>

    <!-- 立即购买 -->
    <uni-popup ref="cashPopup" type="dialog">
      <uni-popup-dialog
          :type="msgType"
          :before-close="true"
          cancelText="取消"
          confirmText="确定"
          title="账户余额购买"
          @confirm="toAccountBuy"
          @close="dialogClose">
        <template v-slot="content">
          <view class="bg_title">
            购买账户【<span style="font-weight:600;">{{ userInfo.name }}</span>】，账户余额：
            <span style="font-weight:600;">{{ userInfo.balance }}</span>
            <span style="margin-left: 5rpx;">元</span>
          </view>
          <uni-forms ref="form" :modelValue="form" :rules="rules" label-width="140rpx">
            <uni-forms-item label="套餐名称" name="name" class="paddingAll">
              <uni-easyinput v-model="form.name" type="text" disabled/>
            </uni-forms-item>
            <uni-forms-item label="签署量" name="signNum" class="paddingAll">
              <uni-easyinput v-model="form.signNum+' 次'" type="text" disabled/>
            </uni-forms-item>
            <uni-forms-item label="赠送" name="giveSignNum" class="paddingAll">
              <uni-easyinput v-model="form.giveSignNum+' 次'" type="text" disabled/>
            </uni-forms-item>
            <uni-forms-item label="支付金额" name="nowPrice" class="paddingAll">
              <uni-easyinput v-model="form.nowPrice+'元'" type="text" disabled/>
            </uni-forms-item>
            <uni-forms-item label="支付密码" name="payPwd" :required="true">
              <uni-easyinput
                  v-model="form.payPwd"
                  type="password"
                  placeholder="请输入支付密码"
                  :clearable="false"
                  :maxlength="30"/>
            </uni-forms-item>
            <view>
              <checkbox-group
                  style="margin-top:20rpx;text-align: left;font-size: 24rpx;"
                  @change="selectEleBuyAgreement">
                <label>
                  <checkbox value="1" color="#00a660" style="transform:scale(0.6)"/>
                  我已阅读并同意
                  <a class="a-primary" @click.stop="toEleBuyAgreement">
                    <span>《电子签服务购买协议》</span>
                  </a>
                </label>
              </checkbox-group>
            </view>
          </uni-forms>
        </template>
      </uni-popup-dialog>
    </uni-popup>

  </view>
</template>

<script>
import SelectPayerStaff from "../selectPayerStaff";
import {accountBuy, getSignFlowFeeList, integralExchange} from "@/api/ec/person/fee/product";
import {getStaffNoDept} from "@/api/ec/console/org/staff";
import {getDictsByNameForUni} from "../../../../../utils/dicts";

export default {
  components: {SelectPayerStaff},
  name: 'signFlowFee',
  data() {
    return {
      // 数据字典
      dicts: {
        // 签署流量包效期
        ec_sign_flow_fee_valid_period: [],
      },
      // 用户信息
      userInfo: this.$store.getters.staffInfo,
      // 数据列表
      dataList: [],

      // ===============================================================================================================
      // ==== 弹出框
      // ===============================================================================================================
      msgType: 'info',
      // 电子签购买协议
      eleBuyAgreement: undefined,
      // 表单参数
      form: {
        id: undefined,
        name: undefined,
        signNum: undefined,
        integral: undefined,
        payPwd: undefined
      },
      // 验证
      rules: {
        payPwd: {
          rules: [
            {required: true, errorMessage: "请输入支付密码", trigger: "blur"},
          ]
        },
      },
    }
  },
  created() {
    this.getDicts()
    this.getStaffInfo();
    this.getList();
  },
  methods: {
    // ===============================================================================================================
    // ==== 加载数据字典
    // ===============================================================================================================
    /**加载数据字典*/
    getDicts() {
      // 签署流量包效期 
      this.dicts.ec_sign_flow_fee_valid_period = getDictsByNameForUni("ec_sign_flow_fee_valid_period");
    },
    // ===============================================================================================================
    // ==== 加载页面数据
    // ===============================================================================================================
    /** 查询用户信息 */
    getStaffInfo() {
      getStaffNoDept(this.userInfo.id).then(response => {
        this.userInfo = response.data;
      });
    },
    /** 查询签署流量包订单列表 */
    getList() {
      this.$modal.loading();
      getSignFlowFeeList().then(response => {
        uni.hideLoading()
        this.dataList = response.data;
      }).catch(() => {
        uni.hideLoading()
      });
    },
    // ===============================================================================================================
    // ==== 弹出框
    // ===============================================================================================================
    /** 关闭弹出框 */
    dialogClose() {
      this.$refs.cashPopup.close()
      this.$refs.integralPopup.close()
    },
    /** 电子签服务购买协议 */
    toEleBuyAgreement() {
      // 关掉弹出层之后再跳转
      this.dialogClose()
      this.$tab.navigateTo('/pages/common/policy/eleBuyAgreement')
    },
    /** 协议选择框选择 */
    selectEleBuyAgreement(e) {
      this.eleBuyAgreement = e.detail.value[0];
    },
    /** 打开碳能量兑换弹出框 */
    toShowIntegralExchange(item) {
      this.eleBuyAgreement = undefined
      this.form.payPwd = ''
      this.form = item
      this.$refs.integralPopup.open()
    },
    /** 碳能量兑换 */
    toIntegralExchange() {
      this.$refs.integralForm.validate().then(res => {
        if (this.eleBuyAgreement != "1") {
          this.$modal.msgError("请先阅读并勾选同意《电子签服务购买协议》")
          return;
        }
        this.$modal.loading();
        integralExchange(this.form.id, this.form.payPwd).then(() => {
          uni.hideLoading()
          this.$refs.integralPopup.close()
          this.$modal.msgSuccess("兑换成功")
        }).catch(() => {
          uni.hideLoading()
        });
      });
    },
    /** 打开账户余额支付弹出框 */
    toShowAccountBuy(item) {
      this.eleBuyAgreement = undefined
      this.form.payPwd = ''
      this.form = item
      this.$refs.cashPopup.open()
    },
    /** 账户余额支付 */
    toAccountBuy() {
      this.$refs.form.validate().then((res) => {
        if (this.eleBuyAgreement != "1") {
          this.$modal.msgError("请先阅读并勾选同意《电子签服务购买协议》")
          return;
        }
        this.$modal.loading();
        accountBuy(this.form.id, this.form.payPwd).then(() => {
          uni.hideLoading()
          this.$refs.cashPopup.close()
          this.$modal.msgSuccess("购买成功")
        }).catch(() => {
          uni.hideLoading()
        });
      });
    },
    /** 立即联系客服 */
    phone() {
      uni.makePhoneCall({phoneNumber: '400-891-3655'});
    },
  }
}
</script>

<style lang="scss" scoped>
.card-list {
  text-align: center;
  padding: 10rpx 20rpx !important;
}

page {
  background: $uni-bg-color-grey;
}

::v-deep .uni-forms-item .is-required {
  display: none;
}

::v-deep .uni-popup .uni-popup__wrapper {
  width: 90% !important;
}

::v-deep .uni-popup-dialog {
  width: 100%;
}

::v-deep .content-clear-icon {
  color: $uni-color-primary !important;
}

::v-deep .uni-input-input {
  color: #666666;
  opacity: 1;
  -webkit-opacity: 1;
  -webkit-text-fill-color: #666666; // ios 和 安卓9.0 必须添加此属性，才会生效
}

::v-deep .uni-forms-item {
  margin-bottom: 24rpx;
}

::v-deep .uni-dialog-content {
  display: block;
  padding: 10px;
}

.bg_title {
  background: #f0f9eb;
  color: #555b65;
  padding: 20rpx;
  display: block;
  margin-bottom: 20rpx;
  font-size: 24rpx;
  font-weight: 400;
}

.gride-btn {
  margin-top: 30rpx;
  display: flex;
  justify-content: space-between;
}
</style>
